// Tag

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin tag {
  display: inline-flex;
  align-items: center;
  font-size: $--x-font-size-small;
  border-radius: $--x-border-radius;
  height: 1.625rem;
  line-height: 1.625rem;
  padding: 0 0.65rem;
  white-space: nowrap;
  border: $--x-border-width $--x-border-style;
  > .x-icon {
    position: relative;
    right: -0.25rem;
    border-radius: 50%;
    cursor: pointer;
    padding: 0.0625rem;
    font-size: calc(#{$--x-font-size-small} + 0.0625rem);
    transition: 0.3s;
    &:hover {
      background-color: var(--x-text-500);
      color: var(--x-white);
    }
  }
  &-dark {
    background-color: $--x-text;
    color: $--x-background-100;
    > .x-icon:hover {
      background-color: rgba(255, 255, 255, 0.3);
    }
  }
  @include size('big', $--x-height-big, $--x-padding-big);
  @include size('large', $--x-height-large, $--x-padding-large);
  @include size('medium', $--x-height-medium, $--x-padding-medium);
  @include size('small', $--x-height-small, $--x-padding-small);
  @include size('mini', $--x-height-mini, $--x-padding-mini);

  @include type(
    'initial',
    $--x-text,
    $--x-border,
    $--x-background-200,
    $--x-text-400,
    $--x-background-200,
    $--x-border,
    $--x-text-400,
    $--x-background-200,
    $--x-border
  );
  @include type(
    'primary',
    $--x-primary,
    $--x-primary-600,
    $--x-primary-900,
    $--x-primary-400,
    $--x-primary-900,
    $--x-primary-800,
    $--x-primary-800,
    $--x-primary-500,
    $--x-primary-500
  );
  @include type(
    'success',
    $--x-success,
    $--x-success-600,
    $--x-success-900,
    $--x-success-400,
    $--x-success-900,
    $--x-success-800,
    $--x-success-800,
    $--x-success-500,
    $--x-success-500
  );
  @include type(
    'warning',
    $--x-warning,
    $--x-warning-600,
    $--x-warning-900,
    $--x-warning-400,
    $--x-warning-900,
    $--x-warning-800,
    $--x-warning-800,
    $--x-warning-500,
    $--x-warning-500
  );
  @include type(
    'danger',
    $--x-danger,
    $--x-danger-600,
    $--x-danger-900,
    $--x-danger-400,
    $--x-danger-900,
    $--x-danger-800,
    $--x-danger-800,
    $--x-danger-500,
    $--x-danger-500
  );
  @include type(
    'info',
    $--x-info,
    $--x-info-600,
    $--x-info-900,
    $--x-info-400,
    $--x-info-900,
    $--x-info-800,
    $--x-info-800,
    $--x-info-500,
    $--x-info-500
  );
}

@mixin type(
  $type,
  $color,
  $border-color,
  $background-color,
  $disabled-color,
  $disabled-background,
  $disabled-border,
  $dark-disabled-color,
  $dark-disabled-background,
  $dark-disabled-border
) {
  &-#{$type} {
    border-color: $border-color;
    color: $color;
    background-color: $background-color;
    > .x-icon:hover {
      background-color: $color;
    }
    &.x-disabled {
      @include disabled($disabled-color, $disabled-background, $disabled-border);
      &:hover,
      &:active {
        @include disabled($disabled-color, $disabled-background, $disabled-border);
      }
    }
    &.#{$--x-tag-prefix}-dark {
      border-color: $color;
      color: $--x-white;
      background-color: $color;
      > .x-icon:hover {
        background-color: rgba(255, 255, 255, 0.3);
      }
    }
    &.#{$--x-tag-prefix}-dark.x-disabled {
      @include disabled($dark-disabled-color, $dark-disabled-background, $dark-disabled-border);
      &:hover,
      &:active {
        @include disabled($dark-disabled-color, $dark-disabled-background, $dark-disabled-border);
      }
    }
  }
}

@mixin size($size, $height, $padding) {
  &-#{$size} {
    height: $height;
    line-height: $height;
    padding: 0 $padding;
    > .x-icon {
      right: -$padding/2;
    }
  }
}

@mixin disabled($color, $bg-color, $border-color) {
  color: $color;
  cursor: not-allowed;
  background-image: none;
  background-color: $bg-color;
  border-color: $border-color;
  &:hover,
  &:active,
  &:focus {
    color: $color;
    background-color: $bg-color;
    border-color: $border-color;
  }
  > .x-icon:hover {
    cursor: inherit;
    color: $color;
    background-color: $bg-color;
  }
}
